<template>
  <div class="p-4">
    <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 10 }">
      <a-form-item :labelCol="{ style: { width: '72px' } }" label="统计范围">
        <JCascader placeholder="请选择" v-model:value="tjfw" :api="gxqyOptionsListApi" change-on-select />
      </a-form-item>
    </a-form>
    <GrowCard :loading="loading" class="enter-y" :tjfw="tjfw" />
    <div class="md:flex enter-y !my-4">
      <OperatorAnalysis class="md:w-1/2 !md:mr-4 w-full !md:mt-0 !mt-4" :loading="loading" :tjfw="tjfw" />
      <GuestAnalysis class="md:w-1/2 w-full !md:mt-0 !mt-4" :loading="loading" :tjfw="tjfw" />
    </div>
    <div class="md:flex enter-y !my-4">
      <RegionalStatistics class="md:w-1/2 !md:mr-4 w-full !md:mt-0 !mt-4" :loading="loading" />
      <CheckInTrend class="md:w-1/2 w-full !md:mt-0 !mt-4" :loading="loading" />
    </div>
    <div class="md:flex enter-y">
      <PropertyDeclaration class="md:w-1/2 w-full !md:mr-4 !md:mt-0 !mt-4" :loading="loading" />
      <CheckInUpdates class="md:w-1/2 w-full !md:mt-0 !mt-4" :loading="loading" />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, provide, computed } from 'vue';
  import GrowCard from './components/GrowCard.vue';
  import OperatorAnalysis from './components/OperatorAnalysis.vue';
  import RegionalStatistics from './components/RegionalStatistics.vue';
  import GuestAnalysis from './components/GuestAnalysis.vue';
  import CheckInUpdates from './components/CheckInUpdates.vue';
  import { JCascader } from '/@/components/Form';
  import CheckInTrend from './components/CheckInTrend.vue';
  import PropertyDeclaration from './components/PropertyDeclaration.vue';
  import { gxqyOptionsListApi } from '@/api/wyf/user/gxqySelect';
  const tjfw = ref([]);
  const loading = ref(false);
  const filterGxqy = computed(() => {
    let gxqy = '';
    if (tjfw.value) {
      gxqy = tjfw.value[tjfw.value.length - 1];
    }
    return gxqy;
  });
  provide('tjfw', filterGxqy);
  // function handleChange() {
  //   loading.value
  // }
  // setTimeout(() => {
  //   loading.value = false;
  // }, 500);
</script>
